<template>
    <div class="layout1">
        <Layout>
            <Sider hide-trigger><Tree :data="list" @on-select-change='selectionClick'></Tree></Sider>
            <Layout>
                <Header>
                    <i-input icon="search" placeholder="请输入..." style="width: 350px" @on-click="search()" v-model="searchText" class="searchInput"></i-input>                  
                    <Button type="error" class="ivu-btn1"  @click="confirm()">删除多个</Button>
                    <Button type="info" class="ivu-btn1" @click="modal=true;type='create'">增加</Button>
                    <Button type="success" class="ivu-btn1" @click="handleSelectAll(beall)">全选</Button>
                    <Modal
                        v-model="modal"
                        title="添加新的新闻"
                        :mask-closable="false">
                    <Form ref="formValidate" :model="formValidate"  :label-width="80">
                        <FormItem label="新闻标题">
                            <Input v-model="formValidate.title"></Input>
                        </FormItem>
                        <FormItem label="新闻作者">
                            <Input v-model="formValidate.author"></Input>
                        </FormItem>
                        <!-- <FormItem label="内容">
                            <Input v-model="formLeft.input3"></Input>
                        </FormItem> -->
                        <FormItem label="新闻内容" prop="desc">
                            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                        </FormItem>
                    </Form>
                </Modal>
                </Header>
                <Content><Table border ref="selection" :columns="columns" :data="data" @on-selection-change="addSelectData($event)"></Table></Content>
                <Footer>
                    <!-- <Page :total="total"></Page> -->
                    <!-- <Page :total="total" size="small" show-elevator show-sizer></Page> -->                  
                    <Page :total="title" :current="page" size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)" :page-size-opts="[5, 10, 15, 20]" :page-size="5"></Page>
                </Footer>
            </Layout>
        </Layout>
    </div>
    
    
</template>
<script>
import Base from "./Base";
    export default {
        mixins:[Base],
        data () {
            return {
                module:'news',
               list:[],
               total:0,
               beall:true,
                modal1:false,
                type:'',
                searchText:'',
                realSearchText:'',
                modal:false,
                selectData:[],
                formValidate: {
                    title: '',
                    author:'',
                    desc:'',
                    cateId:''
                },                                                             
               filter:{
                   limit:5,
                    page:1,
                    title:10
               },
                cateId:'',
               columns: [
                   {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title',
                    },
                    {
                        title: '作者',
                        key: 'author'
                    },
                    {
                        title: '时间',
                        key: 'date'
                    },
                    {
                        title: '评论数',
                        key: 'comments',
                        width: 150,
                        align: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            this.$router.push(`/news/newsComment/${params.row._id}`);
                                            this.$emit('newsComment');                                            
                                        }
                                    }
                                }, '查看评论'),
                            ])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.type="change";
                                            this.modal=true;
                                            this.formValidate={...(this.data[params.index])};                                        
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            }
        },
        methods:{
            getList(){
                var newshttp='http://10.31.160.22:3000/cate/list/0'                
                this.$http.get(newshttp).then((response) => {
                    // console.log(response.data)
                    this.list=response.data
                })
            },
            handleSelectAll (status) {               
                this.$refs.selection.selectAll(status);
                this.beall=!this.beall;
            },
            getUserDate(){
                this.$http.post(
                    `http://10.31.160.22:3000/${this.module}/list`,{
                    title:this.realSearchText,limit:this.limit,page:this.page,cateId:this.cateId
                }).then(res=>{
                    this.data=res.data.rows;
                    this.title=res.data.total;
                    this.page=res.data.page;
                    // console.log(res.data);
                });  
            },
            show (index) {
                this.$Modal.info({
                    title: '新闻详情',
                    content: `新闻标题：${this.data[index].title}<br>新闻作者：${this.data[index].author}<br>新闻内容:${this.data[index].desc}<br>评论数量：${this.data[index].comments}<br>发布时间：${this.data[index].date}`
                })
            },  
            getCommentData(){
                this.$http({
                    method:'post',
                    url:'http://10.31.160.22:3000/newsComment/list',
                    data:this.data
                }).then(res=>{
                    this.list=res.data.docs;
                    this.data.total=res.data.total;
                })
            },         
            search(){
                this.realSearchText=this.searchText;
                this.page=1;
                this.getUserDate();
            },
            selectionClick(node) {
                this.cateId=node[0]._id;
                this.formValidate.cateId=node[0]._id;
                this.getUserDate();
            }
        },
        created() {
          this.getList();
        }
    }
</script>

<style scoped>
.ivu-layout-header{
    background-color: #fff
}
 .ivu-layout-sider{
   background-color: #fff
 }
 .ivu-input-group .ivu-input,.ivu-input-group{
     width: 60%
 }
 .ivu-btn1{
     float: right;
     margin:0px 8px 0;
 }
 .ivu-layout-header{
     height:40px;
     padding: 0;
 }
 .searchInput{
     margin-top: -30px;
     
 }
</style>



